<template>
  <div class="singer">
    <MusicLaoding v-if="show" />
    <MusicSingers v-else :artists="artists" />
    <MusicTabBar :actives="1" />
  </div>
</template>

<script>
import { GetTopListArtistsAPI } from "@/api/api.js";
import MusicLaoding from "@/components/common/laoding.vue";
import MusicSingers from "@/components/singer/singers.vue";
import MusicTabBar from "@/components/Tab_bar/Tab_bar.vue";

export default {
  name: "MusicSinger",
  components: {
    MusicTabBar,
    MusicSingers,
    MusicLaoding,
    MusicTabBar,
  },
  data() {
    return {
      show: true,
      artists: [],
    };
  },

  mounted() {
    GetTopListArtistsAPI({ limit: 200 }).then((res) => {
      if (res.status == 200) {
        this.artists = res.data.list.artists;
        this.show = false;
      }
    });
    this.$store.commit("SET_HIGHLY", true);
  },
  destroyed() {
    this.$store.commit("SET_HIGHLY", false);
  },
  methods: {},
};
</script>

<style lang="less" scoped>
</style>